<template>
    <div class="box">
        <div class="search">
            <form   action="/">
            <van-search
            v-model="keywords"
            show-action
            placeholder="请输入城市名或拼音"
            @input="search"
            @cancel="onCancel"
            />
            </form>
        </div>
        <van-cell-group class="sousuo" v-show="!xianshi">
            <van-cell v-for="item2 in searchlist" :title=item2.name  @click="onclick(item2)" />
        </van-cell-group>



        <div class="hotbox">
        <div class="city-title">热门城市</div>
        <ul class="city-index">
            <!-- 循环拿到热门城市 -->
            <li @click="onclick(item)"  v-for="(item,index) in hot" :key="index"><div>{{item.name}}</div></li>
        </ul>
        </div>
            <van-index-bar :index-list="letterList" class="aaa">
                <div v-for="data in city" :key="data.Letter">
                    <van-index-anchor :index="data.Letter" />
                    <!-- 一个字母数组里面需要创建多少个列表 -->
                    <van-cell :title="item.name"  v-for="item in data.newlist
                    " :key="item.cityId"  @click="onclick(item)" />
                </div>
            </van-index-bar>
            <!-- 从citylist获取每个字母的列表 分别需要创建22个数组 --> 
        
    </div>
</template>

<script>
import { Cities } from '@/request/request'
import { IndexBar, IndexAnchor } from 'vant';
import { Search } from 'vant';
import { createApp } from 'vue';
import 'vant/lib/index.css';
const app = createApp()
app.use(Search);
app.use(IndexBar);
app.use(IndexAnchor);
export default {
    created() {
        
    },
    data () {
        return {
            keywords: '',
            cities: {},
            //热门城市的数组
            hot:[],
            value: '',   
            city:[],
            letterList:[],
            xianshi: true,
            // 搜索用的数据
            searchlist: []
        }
    },
    async mounted(){
        this.cities = (await Cities()).data.cities
            // console.log(this.cities)
            let arr = []
            for(let i=0; i<this.cities.length; i++){
            //判断当数据中的ishot的值是1的时候就说明是热门城市
                if(this.cities[i].isHot==1){
                //通过push方法将热门城市添加到arr空数组中
                arr.push(this.cities[i])
            } 
        }
        this.hot = arr
        // console.log(this.hot)
        // let a = await renderCity(this.cities)
        // console.log(a);
        this.letterList = []
        /* 遍历出26个英文字母 */
        for (let i = 65; i < 91; i++) {
        this.letterList.push(String.fromCharCode(i))
    
    } 
        // console.log(this.letterList)
        this.letterList.forEach(Letter => {
            // console.log(Letter);
            // console.log(this.cities);
            let newlist = this.cities.filter(item => item.pinyin.slice(0, 1).toUpperCase() === Letter)
            // console.log(newlist);
            this.city.push({newlist,Letter})
        })
        // console.log(this.city);

          
  },
    methods: {
        onclick(city) {
            // console.log(city);
            let path = this.$route.query.url
            let id = city.cityId
            let name = city.name
            // console.log(path,name);
            this.$store.commit('changecity',name)
            this.$store.commit('changeid',id)
            this.$router.push({path:path,query:{id,name}})
        },
        onCancel() {
            this.$router.back()
        },
        search() {
            this.xianshi = false
            // console.log(this.cities);
            // return
            this.searchlist = this.cities.filter(item =>
                item.name.includes(this.keywords)
            )
            // console.log(this.searchlist);

        },
        // remen(val) {
        //     this.keywords = val
        //     this.search()
        // }
    },
}
</script>

<style scoped>
.aaa{
    background-color: rgb(242, 242, 242);
}
.xia{
    line-height: 10px;
    list-style: none;
}
  .box{
    box-sizing: border-box;
    background-color: #fff;
  }
  
  .hotbox{
    padding-left: 15px;
    padding-top: 15px;
    height: 120px;
    margin-bottom: 10px;
  }
  .city-title{
    font-size:13px;
    color: #797d82;
  }
 .city-index{
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: wrap;
 }
 .city-index>li{
  width: 33.3%;
  text-align: center;
  box-sizing: border-box;
  padding-bottom: 15px;
 }
 .city-index>li>div{
  height: 30px;
  background: #f4f4f4;
  line-height: 30px;
  border-radius: 3px;
  box-sizing: border-box;
  margin: 0 7.5px;
  font-size: 14px;
  color: #191a1b;
 }
 .theheader{
    line-height: 10px;
    background: #f4f4f4;
 }
</style>
